﻿<%@ Page Title="" Language="C#" MasterPageFile="~/Views/Shared/ViewMasterPage.Master" Inherits="System.Web.Mvc.ViewPage<dynamic>" %>

<asp:Content ID="Content1" ContentPlaceHolderID="MainContent" runat="server">
	<div class="draggable-events">
		<p>
			Layer functionality onto the draggable using the start, drag, and stop events.
			Start is fired at the start of the drag; drag during the drag; and stop when
			dragging stops.
		</p>

		<div id="draggable" class="ui-widget ui-widget-content">
			<p>Drag me to trigger the chain of events.</p>
		
			<ul class="ui-helper-reset">
				<li id="event-start" class="ui-state-default ui-corner-all">
					<span class="ui-icon ui-icon-play"></span>
					"start" invoked
					<span class="count">0</span>x
				</li>
				<li id="event-drag" class="ui-state-default ui-corner-all">
					<span class="ui-icon ui-icon-arrow-4"></span>
					"drag" invoked
					<span class="count">0</span>x
				</li>
				<li id="event-stop" class="ui-state-default ui-corner-all">
					<span class="ui-icon ui-icon-stop"></span>
					"stop" invoked
					<span class="count">0</span>x
				</li>
			</ul>
		</div>
	</div>
	<script type="text/javascript">
		ContribSample.jQueryUI.DraggableSamples.events();
	</script>
</asp:Content>
